# TypeScript 与 React 实战(组件篇下)

上一节我们讲到用 class 一处编写能两处复用的方式虽然非常实用，但是我们不得不用一些 Hack 手段来避免后续的报错，有没有更优雅、更严谨的解决方案？

虽然 class 的写法需要一些 Hack 手段，但是笔者很多时候还是用了 class，因为确实很猛糙快。

本节会涉及一些超纲的工具类型运用，比如Pick、Omit，可以结合第25节阅读。

# 利用高级类型解决默认属性报错

我们现在需要先声明defaultProps的值:

const todoInputDefaultProps = {
    inputSetting: {
        maxlength: 20,
        placeholder: '请输入todo',
    }
}

@前端进阶之旅: 代码已经复制到剪贴板

接着定义组件的props类型

type Props = {
    handleSubmit: (value: string) => void
    children: React.ReactNode
} & Partial<typeof todoInputDefaultProps>

@前端进阶之旅: 代码已经复制到剪贴板

Partial的作用就是将类型的属性全部变成可选的,也就是下面这种情况：

{
    inputSetting?: {
        maxlength: number;
        placeholder: string;
    } | undefined;
}

@前端进阶之旅: 代码已经复制到剪贴板

那么现在我们使用Props是不是就没有问题了？

export class TodoInput extends React.Component<Props, State> {

    public static defaultProps = todoInputDefaultProps

...

    public render() {
        const { itemText } = this.state
        const { updateValue, handleSubmit } = this
        const { inputSetting } = this.props

        return (
            <form onSubmit={handleSubmit} >
                <input maxLength={inputSetting.maxlength} type='text' value={itemText} onChange={updateValue} />
                <button type='submit' >添加todo</button>
            </form>
        )
    }

...
}

@前端进阶之旅: 代码已经复制到剪贴板

我们看到依旧会报错：

2019-07-05-11-56-45

其实这个时候我们需要一个函数，将 defaultProps 中已经声明值的属性从『可选类型』转化为『非可选类型』。

我们先看这么一个函数:

const createPropsGetter = <DP extends object>(defaultProps: DP) => {
    return <P extends Partial<DP>>(props: P) => {
        type PropsExcludingDefaults = Omit<P, keyof DP>
        type RecomposedProps = DP & PropsExcludingDefaults

        return (props as any) as RecomposedProps
    }
}